<template>
  <div class="health-analytics">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">健康数据分析</h1>
      <p class="page-subtitle">全面了解您的健康状况和趋势</p>
    </div>

    <!-- 快速操作卡片 -->
    <div class="quick-actions">
      <el-card class="action-card" @click="generateAnalysis('VITAL_SIGNS')">
        <div class="action-content">
          <el-icon class="action-icon"><Monitor /></el-icon>
          <div class="action-text">
            <h3>生命体征分析</h3>
            <p>分析血压、心率等生命体征数据</p>
          </div>
        </div>
      </el-card>
      
      <el-card class="action-card" @click="generateAnalysis('HEALTH_TREND')">
        <div class="action-content">
          <el-icon class="action-icon"><TrendCharts /></el-icon>
          <div class="action-text">
            <h3>健康趋势分析</h3>
            <p>查看健康数据的变化趋势</p>
          </div>
        </div>
      </el-card>
      
      <el-card class="action-card" @click="generateAnalysis('RISK_ASSESSMENT')">
        <div class="action-content">
          <el-icon class="action-icon"><Warning /></el-icon>
          <div class="action-text">
            <h3>风险评估</h3>
            <p>评估潜在的健康风险</p>
          </div>
        </div>
      </el-card>
      
      <el-card class="action-card" @click="generateAnalysis('SYMPTOM_PATTERN')">
        <div class="action-content">
          <el-icon class="action-icon"><DataAnalysis /></el-icon>
          <div class="action-text">
            <h3>症状模式分析</h3>
            <p>分析症状出现的规律和模式</p>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 健康评分卡片 -->
    <el-card class="health-score-card" v-if="healthStatistics">
      <template #header>
        <div class="card-header">
          <span>健康评分</span>
          <el-button type="primary" size="small" @click="refreshHealthScore">刷新</el-button>
        </div>
      </template>
      <div class="health-score-content">
        <div class="score-display">
          <div class="score-number" :class="getScoreClass(healthStatistics.averageHealthScore)">
            {{ Math.round(healthStatistics.averageHealthScore || 0) }}
          </div>
          <div class="score-label">综合健康评分</div>
        </div>
        <div class="score-chart">
          <div ref="scoreChartRef" style="width: 200px; height: 200px;"></div>
        </div>
      </div>
    </el-card>

    <!-- 健康趋势图表 -->
    <el-card class="trend-chart-card">
      <template #header>
        <div class="card-header">
          <span>健康评分趋势</span>
          <div class="date-picker">
            <el-date-picker
              v-model="trendDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              @change="loadHealthTrend"
            />
          </div>
        </div>
      </template>
      <div class="trend-chart">
        <div ref="trendChartRef" style="width: 100%; height: 400px;"></div>
      </div>
    </el-card>

    <!-- 分析类型统计 -->
    <div class="statistics-row">
      <el-card class="stat-card">
        <template #header>
          <span>分析类型分布</span>
        </template>
        <div ref="typeStatsChartRef" style="width: 100%; height: 300px;"></div>
      </el-card>
      
      <el-card class="stat-card">
        <template #header>
          <span>风险等级分布</span>
        </template>
        <div ref="riskStatsChartRef" style="width: 100%; height: 300px;"></div>
      </el-card>
    </div>

    <!-- 最近分析记录 -->
    <el-card class="recent-analytics-card">
      <template #header>
        <div class="card-header">
          <span>最近分析记录</span>
          <el-button type="primary" size="small" @click="viewAllAnalytics">查看全部</el-button>
        </div>
      </template>
      <div class="analytics-list">
        <div 
          v-for="analytics in recentAnalytics" 
          :key="analytics.id" 
          class="analytics-item"
          @click="viewAnalyticsDetail(analytics)"
        >
          <div class="analytics-info">
            <div class="analytics-type">
              <el-tag :type="getAnalyticsTypeColor(analytics.analysisType)">
                {{ getAnalyticsTypeName(analytics.analysisType) }}
              </el-tag>
            </div>
            <div class="analytics-content">
              <h4>{{ analytics.summary }}</h4>
              <p class="analytics-time">{{ formatDate(analytics.createdAt) }}</p>
            </div>
          </div>
          <div class="analytics-score">
            <div class="score" :class="getScoreClass(analytics.healthScore)">
              {{ analytics.healthScore || '--' }}
            </div>
            <div class="risk-level">
              <el-tag :type="getRiskLevelColor(analytics.riskLevel)" size="small">
                {{ getRiskLevelName(analytics.riskLevel) }}
              </el-tag>
            </div>
          </div>
        </div>
        
        <div v-if="recentAnalytics.length === 0" class="empty-state">
          <el-empty description="暂无分析记录" />
        </div>
      </div>
    </el-card>

    <!-- 分析详情对话框 -->
    <el-dialog 
      v-model="showAnalyticsDetail" 
      title="分析详情" 
      width="60%"
      :before-close="closeAnalyticsDetail"
    >
      <div v-if="selectedAnalytics" class="analytics-detail">
        <div class="detail-header">
          <div class="detail-title">
            <h2>{{ selectedAnalytics.summary }}</h2>
            <div class="detail-meta">
              <el-tag :type="getAnalyticsTypeColor(selectedAnalytics.analysisType)">
                {{ getAnalyticsTypeName(selectedAnalytics.analysisType) }}
              </el-tag>
              <el-tag :type="getRiskLevelColor(selectedAnalytics.riskLevel)" class="ml-2">
                {{ getRiskLevelName(selectedAnalytics.riskLevel) }}
              </el-tag>
              <span class="detail-time">{{ formatDate(selectedAnalytics.createdAt) }}</span>
            </div>
          </div>
          <div class="detail-score">
            <div class="score-large" :class="getScoreClass(selectedAnalytics.healthScore)">
              {{ selectedAnalytics.healthScore || '--' }}
            </div>
            <div class="score-label">健康评分</div>
          </div>
        </div>
        
        <div class="detail-content">
          <div class="detail-section">
            <h3>分析结果</h3>
            <p>{{ selectedAnalytics.summary }}</p>
          </div>
          
          <div class="detail-section" v-if="selectedAnalytics.recommendations">
            <h3>健康建议</h3>
            <p>{{ selectedAnalytics.recommendations }}</p>
          </div>
          
          <div class="detail-section" v-if="selectedAnalytics.abnormalIndicators">
            <h3>异常指标</h3>
            <el-tag 
              v-for="indicator in selectedAnalytics.abnormalIndicators.split(', ')" 
              :key="indicator"
              type="warning"
              class="mr-2 mb-2"
            >
              {{ indicator }}
            </el-tag>
          </div>
          
          <div class="detail-section" v-if="selectedAnalytics.keyChanges">
            <h3>关键变化</h3>
            <p>{{ selectedAnalytics.keyChanges }}</p>
          </div>
          
          <div class="detail-section">
            <h3>趋势方向</h3>
            <el-tag :type="getTrendDirectionColor(selectedAnalytics.trendDirection)">
              {{ getTrendDirectionName(selectedAnalytics.trendDirection) }}
            </el-tag>
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeAnalyticsDetail">关闭</el-button>
          <el-button type="primary" @click="markAsRead(selectedAnalytics.id)" v-if="!selectedAnalytics.isRead">
            标记为已读
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 生成分析对话框 -->
    <el-dialog 
      v-model="showGenerateDialog" 
      title="生成健康分析" 
      width="40%"
    >
      <el-form :model="generateForm" label-width="100px">
        <el-form-item label="分析类型">
          <el-select v-model="generateForm.analysisType" placeholder="请选择分析类型">
            <el-option label="生命体征分析" value="VITAL_SIGNS" />
            <el-option label="健康趋势分析" value="HEALTH_TREND" />
            <el-option label="风险评估" value="RISK_ASSESSMENT" />
            <el-option label="症状模式分析" value="SYMPTOM_PATTERN" />
            <el-option label="综合分析" value="COMPREHENSIVE" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="generateForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showGenerateDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmGenerateAnalysis" :loading="generating">
            {{ generating ? '生成中...' : '生成分析' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Monitor, TrendCharts, Warning, DataAnalysis } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { healthAnalyticsApi } from '@/api/healthAnalytics'

// 响应式数据
const healthStatistics = ref(null)
const recentAnalytics = ref([])
const trendDateRange = ref([new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), new Date()])
const showAnalyticsDetail = ref(false)
const selectedAnalytics = ref(null)
const showGenerateDialog = ref(false)
const generating = ref(false)

// 图表引用
const scoreChartRef = ref(null)
const trendChartRef = ref(null)
const typeStatsChartRef = ref(null)
const riskStatsChartRef = ref(null)

// 图表实例
let scoreChart = null
let trendChart = null
let typeStatsChart = null
let riskStatsChart = null

// 生成分析表单
const generateForm = reactive({
  analysisType: '',
  dateRange: [new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), new Date()]
})

// 页面加载时初始化
onMounted(() => {
  loadHealthStatistics()
  loadRecentAnalytics()
  loadHealthTrend()
  nextTick(() => {
    initCharts()
  })
})

// 加载健康统计数据
const loadHealthStatistics = async () => {
  try {
    const userId = 1 // TODO: 从用户状态获取
    const response = await healthAnalyticsApi.getHealthStatistics(userId)
    if (response.data.success) {
      healthStatistics.value = response.data.data
      nextTick(() => {
        updateScoreChart()
        updateTypeStatsChart()
        updateRiskStatsChart()
      })
    }
  } catch (error) {
    console.error('加载健康统计数据失败:', error)
    // 错误消息由响应拦截器统一处理
  }
}

// 加载最近分析记录
const loadRecentAnalytics = async () => {
  try {
    const userId = 1 // TODO: 从用户状态获取
    const response = await healthAnalyticsApi.getRecentAnalytics(userId, 10)
    if (response.data.success) {
      recentAnalytics.value = response.data.data
    }
  } catch (error) {
    console.error('加载最近分析记录失败:', error)
    // 错误消息由响应拦截器统一处理
  }
}

// 加载健康趋势数据
const loadHealthTrend = async () => {
  if (!trendDateRange.value || trendDateRange.value.length !== 2) return
  
  try {
    const userId = 1 // TODO: 从用户状态获取
    const [startDate, endDate] = trendDateRange.value
    const response = await healthAnalyticsApi.getHealthScoreTrend(
      userId, 
      startDate.toISOString(), 
      endDate.toISOString()
    )
    if (response.data.success) {
      updateTrendChart(response.data.data)
    }
  } catch (error) {
    console.error('加载健康趋势数据失败:', error)
    // 错误消息由响应拦截器统一处理
  }
}

// 初始化图表
const initCharts = () => {
  if (scoreChartRef.value) {
    scoreChart = echarts.init(scoreChartRef.value)
  }
  if (trendChartRef.value) {
    trendChart = echarts.init(trendChartRef.value)
  }
  if (typeStatsChartRef.value) {
    typeStatsChart = echarts.init(typeStatsChartRef.value)
  }
  if (riskStatsChartRef.value) {
    riskStatsChart = echarts.init(riskStatsChartRef.value)
  }
}

// 更新评分图表
const updateScoreChart = () => {
  if (!scoreChart || !healthStatistics.value) return
  
  const score = Math.round(healthStatistics.value.averageHealthScore || 0)
  const option = {
    series: [{
      type: 'gauge',
      startAngle: 180,
      endAngle: 0,
      center: ['50%', '75%'],
      radius: '90%',
      min: 0,
      max: 100,
      splitNumber: 5,
      axisLine: {
        lineStyle: {
          width: 6,
          color: [
            [0.3, '#ff4757'],
            [0.6, '#ffa502'],
            [0.8, '#2ed573'],
            [1, '#1e90ff']
          ]
        }
      },
      pointer: {
        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
        length: '12%',
        width: 20,
        offsetCenter: [0, '-60%'],
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        length: 12,
        lineStyle: {
          color: 'auto',
          width: 2
        }
      },
      splitLine: {
        length: 20,
        lineStyle: {
          color: 'auto',
          width: 5
        }
      },
      axisLabel: {
        color: '#464646',
        fontSize: 12,
        distance: -60,
        rotate: 'tangential',
        formatter: function (value) {
          if (value === 0) return '差'
          if (value === 25) return '较差'
          if (value === 50) return '一般'
          if (value === 75) return '良好'
          if (value === 100) return '优秀'
          return ''
        }
      },
      title: {
        offsetCenter: [0, '-10%'],
        fontSize: 14
      },
      detail: {
        fontSize: 24,
        offsetCenter: [0, '-35%'],
        valueAnimation: true,
        formatter: function (value) {
          return Math.round(value)
        },
        color: 'auto'
      },
      data: [{
        value: score,
        name: '健康评分'
      }]
    }]
  }
  
  scoreChart.setOption(option)
}

// 更新趋势图表
const updateTrendChart = (trendData) => {
  if (!trendChart || !trendData) return
  
  const dates = trendData.map(item => item.date)
  const scores = trendData.map(item => item.health_score)
  
  const option = {
    title: {
      text: '健康评分趋势',
      left: 'center',
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        return `${params[0].axisValue}<br/>健康评分: ${params[0].value}`
      }
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      name: '评分'
    },
    series: [{
      data: scores,
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      lineStyle: {
        width: 3,
        color: '#1e90ff'
      },
      itemStyle: {
        color: '#1e90ff'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(30, 144, 255, 0.3)'
          }, {
            offset: 1, color: 'rgba(30, 144, 255, 0.1)'
          }]
        }
      }
    }]
  }
  
  trendChart.setOption(option)
}

// 更新分析类型统计图表
const updateTypeStatsChart = () => {
  if (!typeStatsChart || !healthStatistics.value?.analysisTypeStats) return
  
  const data = healthStatistics.value.analysisTypeStats.map(item => ({
    name: getAnalyticsTypeName(item.analysis_type),
    value: item.count
  }))
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [{
      name: '分析类型',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '18',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data
    }]
  }
  
  typeStatsChart.setOption(option)
}

// 更新风险等级统计图表
const updateRiskStatsChart = () => {
  if (!riskStatsChart || !healthStatistics.value?.riskLevelStats) return
  
  const data = healthStatistics.value.riskLevelStats.map(item => ({
    name: getRiskLevelName(item.risk_level),
    value: item.count
  }))
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [{
      name: '风险等级',
      type: 'pie',
      radius: '70%',
      data: data,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  
  riskStatsChart.setOption(option)
}

// 生成分析
const generateAnalysis = (analysisType) => {
  generateForm.analysisType = analysisType
  showGenerateDialog.value = true
}

// 确认生成分析
const confirmGenerateAnalysis = async () => {
  if (!generateForm.analysisType || !generateForm.dateRange) {
    ElMessage.warning('请选择分析类型和时间范围')
    return
  }
  
  generating.value = true
  
  try {
    const userId = 1 // TODO: 从用户状态获取
    const [startDate, endDate] = generateForm.dateRange
    
    const response = await healthAnalyticsApi.generateAnalysis(
      userId,
      generateForm.analysisType,
      startDate.toISOString(),
      endDate.toISOString()
    )
    
    if (response.data.success) {
      ElMessage.success('健康分析生成成功')
      showGenerateDialog.value = false
      // 刷新数据
      loadHealthStatistics()
      loadRecentAnalytics()
    } else {
      ElMessage.error(response.data.message || '生成分析失败')
    }
  } catch (error) {
    console.error('生成分析失败:', error)
    ElMessage.error('生成分析失败')
  } finally {
    generating.value = false
  }
}

// 查看分析详情
const viewAnalyticsDetail = (analytics) => {
  selectedAnalytics.value = analytics
  showAnalyticsDetail.value = true
}

// 关闭分析详情
const closeAnalyticsDetail = () => {
  showAnalyticsDetail.value = false
  selectedAnalytics.value = null
}

// 标记为已读
const markAsRead = async (analyticsId) => {
  try {
    const response = await healthAnalyticsApi.markAsRead(analyticsId)
    if (response.data.success) {
      ElMessage.success('已标记为已读')
      if (selectedAnalytics.value) {
        selectedAnalytics.value.isRead = true
      }
      loadRecentAnalytics()
    }
  } catch (error) {
    console.error('标记为已读失败:', error)
    ElMessage.error('标记为已读失败')
  }
}

// 刷新健康评分
const refreshHealthScore = () => {
  loadHealthStatistics()
}

// 查看全部分析
const viewAllAnalytics = () => {
  // TODO: 跳转到分析记录列表页面
  ElMessage.info('功能开发中')
}

// 工具函数
const getScoreClass = (score) => {
  if (score >= 80) return 'score-excellent'
  if (score >= 60) return 'score-good'
  if (score >= 40) return 'score-fair'
  return 'score-poor'
}

const getAnalyticsTypeName = (type) => {
  const typeMap = {
    'VITAL_SIGNS': '生命体征分析',
    'HEALTH_TREND': '健康趋势分析',
    'RISK_ASSESSMENT': '风险评估',
    'SYMPTOM_PATTERN': '症状模式分析',
    'COMPREHENSIVE': '综合分析'
  }
  return typeMap[type] || type
}

const getAnalyticsTypeColor = (type) => {
  const colorMap = {
    'VITAL_SIGNS': 'primary',
    'HEALTH_TREND': 'success',
    'RISK_ASSESSMENT': 'warning',
    'SYMPTOM_PATTERN': 'info',
    'COMPREHENSIVE': 'danger'
  }
  return colorMap[type] || 'default'
}

const getRiskLevelName = (level) => {
  const levelMap = {
    'LOW': '低风险',
    'MEDIUM': '中风险',
    'HIGH': '高风险',
    'CRITICAL': '极高风险'
  }
  return levelMap[level] || level
}

const getRiskLevelColor = (level) => {
  const colorMap = {
    'LOW': 'success',
    'MEDIUM': 'warning',
    'HIGH': 'danger',
    'CRITICAL': 'danger'
  }
  return colorMap[level] || 'default'
}

const getTrendDirectionName = (direction) => {
  const directionMap = {
    'IMPROVING': '改善中',
    'STABLE': '稳定',
    'DECLINING': '下降'
  }
  return directionMap[direction] || direction
}

const getTrendDirectionColor = (direction) => {
  const colorMap = {
    'IMPROVING': 'success',
    'STABLE': 'info',
    'DECLINING': 'warning'
  }
  return colorMap[direction] || 'default'
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}
</script>

<style scoped>
.health-analytics {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10px;
}

.page-subtitle {
  font-size: 16px;
  color: #7f8c8d;
  margin: 0;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.action-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.action-card:hover {
  border-color: #409eff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.action-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.action-icon {
  font-size: 32px;
  color: #409eff;
  margin-right: 15px;
}

.action-text h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  color: #2c3e50;
}

.action-text p {
  margin: 0;
  font-size: 14px;
  color: #7f8c8d;
}

.health-score-card {
  margin-bottom: 30px;
}

.health-score-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.score-display {
  text-align: center;
}

.score-number {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
}

.score-excellent {
  color: #1e90ff;
}

.score-good {
  color: #2ed573;
}

.score-fair {
  color: #ffa502;
}

.score-poor {
  color: #ff4757;
}

.score-label {
  font-size: 14px;
  color: #7f8c8d;
}

.trend-chart-card {
  margin-bottom: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  min-height: 350px;
}

.recent-analytics-card {
  margin-bottom: 30px;
}

.analytics-list {
  max-height: 400px;
  overflow-y: auto;
}

.analytics-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.analytics-item:hover {
  background-color: #f5f7fa;
}

.analytics-item:last-child {
  border-bottom: none;
}

.analytics-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.analytics-type {
  margin-right: 15px;
}

.analytics-content h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
  color: #2c3e50;
}

.analytics-time {
  margin: 0;
  font-size: 12px;
  color: #7f8c8d;
}

.analytics-score {
  text-align: center;
}

.score {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.risk-level {
  margin-top: 5px;
}

.empty-state {
  padding: 40px;
  text-align: center;
}

.analytics-detail {
  max-height: 60vh;
  overflow-y: auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.detail-title h2 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #2c3e50;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-time {
  font-size: 12px;
  color: #7f8c8d;
  margin-left: 10px;
}

.detail-score {
  text-align: center;
}

.score-large {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 5px;
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #2c3e50;
  border-left: 3px solid #409eff;
  padding-left: 10px;
}

.detail-section p {
  margin: 0;
  line-height: 1.6;
  color: #606266;
}

.mr-2 {
  margin-right: 8px;
}

.mb-2 {
  margin-bottom: 8px;
}

.ml-2 {
  margin-left: 8px;
}

@media (max-width: 768px) {
  .health-analytics {
    padding: 10px;
  }
  
  .quick-actions {
    grid-template-columns: 1fr;
  }
  
  .statistics-row {
    grid-template-columns: 1fr;
  }
  
  .health-score-content {
    flex-direction: column;
    gap: 20px;
  }
  
  .analytics-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .detail-header {
    flex-direction: column;
    gap: 15px;
  }
}
</style>